<template>
  <div class="page">
    <top-nav></top-nav>
    <transition name="el-fade-in">
      <router-view />
    </transition>
    <bottom-nav></bottom-nav>
    <!-- 充值 -->
    <recharge></recharge>
    <!-- 登录弹窗 -->
    <login></login>
    <!-- 搜索弹窗 -->
    <search></search>
  </div>
</template>

<script>
import recharge from "@/components/dialog/recharge";
import search from "@/components/dialog/search";
import login from "@/components/dialog/login";
import bottomNav from "@/components/nav/bottom";
import topNav from "@/components/nav/top";
export default {
  components: {
    bottomNav,
    topNav,
    login,
    search,
    recharge
  },
  data() {
    return {};
  },
  created() {
    let _this = this;
    if (_this.$store.state.is_login) {
      _this.$axios.get("user/info").then(res => {
        _this.$store.state.is_vip = res.is_vip;
        _this.$store.state.vip_start = res.vip_start;
        _this.$store.state.vip_end = res.vip_end;
        _this.$store.state.is_buy_lesson = res.is_buy_lesson;
      });
    }
    _this.$axios.get("site/info").then(res => {
      _this.$store.state.group_icon1 = res.icon;
      _this.$store.state.group_icon2 = res.icon2;
      _this.$store.state.group_icon3 = res.icon3;
      _this.$store.state.company_name = res.name;
      _this.$store.state.company_logo = res.logo;
      _this.$store.state.company_copyright = res.copyright;
      let head = document.getElementsByTagName("head");
      let meta = document.createElement("meta");
      meta.content = res.seo;
      meta.name = "Keywords";
      head[0].appendChild(meta);
    });
    // setTimeout(() => {
    //   _this.$store.state.show_recharge = true;
    // }, 1000);
  }
};
</script>


<style lang="less">
* {
  font-family: "enFont", "zhFont";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  padding: 0;
  margin: 0;
  border: 0;
  letter-spacing: 1px;
  // user-select: none;
  -webkit-tap-highlight-color: transparent;
}

body img {
  user-select: none;
}

@media only screen and (max-width: 500px),
  only screen and (max-device-width: 500px) {
  html,
  body {
    font-size: calc((100vw * 100) / 750) !important;
    font-size: -webkit-calc((100vw * 100) / 750) !important;
  }
}

.page {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: white;
  font-size: @normal-size;

  ::-webkit-scrollbar {
    display: none;
  }
}

// ::-webkit-scrollbar {
//   display: none;
// }

@font-face {
  font-family: enFont;
  src: url("~@/assets/NotoSansDisplay-Regular.ttf");
}

@font-face {
  font-family: zhFont;
  src: url("~@/assets/SourceHanSansCN-Normal.ttf");
}

.el-dialog {
  background: @dark-color !important;
}

.el-dialog__header {
  font-size: @big-size;
  .el-dialog__title {
    font-size: @big-size;
    font-weight: bold;
    color: white !important;
  }
}

.el-button {
  font-weight: normal !important;
  font-size: @normal-size !important;
  padding: 0.17rem 0.2rem !important;
}

.el-rate__icon {
  font-size: 0.35rem !important;
}

.el-collapse-item__header {
  height: auto !important;
  background: @dark-color !important;
  border-color: #444444 !important;
}

.el-collapse-item__header.is-active {
  border-color: transparent !important;
}

.el-collapse-item__wrap {
  background: @dark-color !important;
  border-color: #444444 !important;
}

.el-tabs__item {
  font-size: @title-size !important;
}

.el-carousel__mask {
  background: transparent !important;
}

.popper__arrow::after {
  border-bottom-color: #191919 !important;
}

.el-popover {
  background: #191919 !important;
  border: 0 !important;
}

.el-timeline-item__content {
  color: white !important;
}

.el-button--primary {
  background-color: @gold-color !important;
  border-color: @gold-color !important;
}

.el-collapse-item__arrow {
  color: white !important;
}

.el-collapse {
  border-color: #444444 !important;
}

video::-internal-media-controls-download-button {
  display: none;
}

video::-webkit-media-controls-enclosure {
  overflow: hidden;
}

video::-webkit-media-controls-panel {
  width: calc(100% + 30px);
}

.mine-title {
  margin: 0.8rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  > p {
    font-size: @title-size;
    color: @node-color;
  }
  > span {
    font-size: 0.35rem;
    color: white;
    margin-bottom: 0.5rem;
    letter-spacing: 2px;
  }
}

.mine-button {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  transition: 300ms;
  cursor: pointer;
  padding: 0.1rem 0.3rem;
  border: 2px @gold-color solid;
  box-sizing: border-box;
}

.mine-button:hover {
  background: @gold-color;
  font-weight: bold;
  color: black;
}
</style>
